<template lang="pug">
.ui.selection.dropdown
  input(type="hidden")
  i.dropdown.icon
  .text.default(v-if="!value") {{default}}
  .text(v-if="value") {{value}}
  .menu
    .item(
      v-for="item in source",
      :value="item.value",
    ) {{ item.text }}
</template>

<script>
export default {
  name: 'dropdown',
  props: ['source', 'value', 'default'],
  ready () {
    $(this.$el).dropdown({
      onChange: (value, text, choice) => {
        const item = _.find(this.source, i=> String(i.text) === String(value))
        this.value = item ? item.value : item
      }
    })
  },
  watch: {
    value (val, old) {
      console.log('value changed inside', val, old)
      $(this.$el)
      .dropdown('refresh')
      .dropdown('set selected', val)
    },
  },
}
</script>

<style lang="sass">
</style>
